<template>
  <el-carousel :interval="5000" trigger="click" :height="$props.height">
    <el-carousel-item v-for="item of carouselList" :key="item.id">
      <div class="big-box" style="width: 100%; height: 100%">
        <a :href="getFullPath(item.targetUrl)" target="_self">
          <img
            style="width: 100%; height: 100%"
            class="image-source"
            :src="item.bigSource"
            loading="lazy"
            alt="big"
          />
        </a>
      </div>
      <div class="small-box">
        <a :href="getFullPath(item.targetUrl)" target="_self">
          <img
            class="image-source"
            :src="item.smallSource"
            loading="lazy"
            alt="small"
          />
        </a>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
  import { reactive, onMounted } from "vue";
  import { CarouselList } from "./../../../types/Home";
  import { getFullPath } from "@/utils/path";

  const $props = withDefaults(
    defineProps<{
      source: Array<CarouselList>;
      height?: string;
      fromPage?: string;
    }>(),
    {
      source: () => [],
      height: () => "656px",
    }
  );

  const carouselList: Array<CarouselList> = reactive([]);

  onMounted(() => {
    if ($props.source) {
      carouselList.push(...$props.source);
    }
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/variable.scss" as *;

  .image-source {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .big-box {
    display: block;
  }
  .small-box {
    display: none;
  }

  .el-carousel__container,
  :deep(.el-carousel__indicators--horizontal) {
    left: calc(100% - 150px);
  }

  .el-carousel__container,
  :deep(.el-carousel__button) {
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-color: hsla(0, 0%, 100%, 0.3);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
  }

  .el-carousel__container,
  :deep(.is-active) {
    .el-carousel__button {
      background: $themeColor;
    }
  }

  @media screen and (max-width: 768px) {
    .big-box {
      display: none;
    }

    .small-box {
      display: block;
    }
  }
</style>
